<template>
	<view>
		<u-sticky>
			<u-tabs :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="">
			<button type="default" @click="golinpage" class="but">画图</button>
			<button type="default" v-if="current===0||current===1" @click="updatalist" class="but">刷新</button>
			<button type="default" v-if="current===2||current===3" @click="updatadouyin" class="but">刷新</button>
			<button type="default" v-if="current===4" @click="updabili" class="but">刷新</button>
			<button type="default" v-if="current===5" @click="updazhihu" class="but">刷新</button>
			<u-modal v-model="show" :mask-close-able="true" :title-style="{color: 'red'}">
				<view style="padding: 20rpx 30rpx;">
					由于小程序不能直接跳转外部链接，所以小程序端只能给出链接。
					<text style="color: #fe877f;">App端可以直接跳转到相应的内容，更方便查看！</text>
				</view>
				<view style="display: flex;padding-bottom: 12rpx;">
					<button type="default" class="but" @click="copycon(1)">复制链接</button>
					<button type="default" class="but" style="width: 220rpx;" @click="copycon(2)">复制标题链接</button>
				</view>
			</u-modal>
			<u-select @confirm="confirm" label-name="day" value-name="_id" v-model="showdate" :list="listdate">
			</u-select>
			<view style="text-align: center;margin-top: 40rpx;" v-if="loadding">
				<text v-if="current===0" class="zdstyle" style="z-index: 9;">{{weibolist.last_update}}</text>
				<text v-if="current===1" class="zdstyle" style="z-index: 9;">{{weibohuatilist.last_update}}</text>
				<text v-if="current===2" class="zdstyle" style="z-index: 9;">{{douyinsou.last_update}}</text>
				<text v-if="current===2" @click="otherdate" class="zdstyle"
					style="z-index: 9;margin-left: 6rpx;">其他时间</text>
				<text v-if="current===3" class="zdstyle" style="z-index: 9;">{{douyinship.last_update}}</text>
				<text v-if="current===3" @click="otherdate" class="zdstyle"
					style="z-index: 9;margin-left: 6rpx;">其他时间</text>
				<text v-if="current===4" class="zdstyle" style="z-index: 9;">{{blidate}}</text>
				<text v-if="current===5" class="zdstyle" style="z-index: 9;">{{zhidate}}</text>
			</view>
			<!-- item 热搜榜-->
			<view v-if="current===0" @click="geturl(item.link,item.title)" class="item_list"
				v-for="(item,index) in weibolist.list" :key="index">
				<view class="item_lf">
					{{item.title}}
				</view>
				<view class="item_rg">
					<Hotfire :item="2" :num="item.other"></Hotfire>
				</view>
			</view>
			<!-- item 话题榜-->
			<view v-if="current===1" @click="geturl(item.link,item.title)" class="item_list"
				v-for="(item,index) in weibohuatilist.list" :key="index">
				<view class="item_lf">
					{{item.title}}
				</view>
				<view class="item_rg" style="width: 25%;">
					<Hotfire :item="2" :size="0" :num="item.other"></Hotfire>
				</view>
			</view>
			<!-- item 抖音热搜榜-->
			<view v-if="current===2" @click="geturl(item.link,item.title)" class="item_list"
				v-for="(item,index) in douyinsou.list" :key="index">
				<view class="item_lf">
					{{item.title}}
				</view>
				<view class="item_rg">
					<Hotfire :item="2" :num="item.other"></Hotfire>
				</view>
			</view>
			<!-- item 抖音视频榜-->
			<view v-if="current===3" @click="geturl(item.link,item.title)" class="item_list"
				v-for="(item,index) in douyinship.list" :key="index">
				<view class="item_lf">
					{{item.title}}
				</view>
				<view class="item_rg">
					<Hotfire :item="2" :num="item.other"></Hotfire>
				</view>
			</view>
			<!-- item bilibili视频榜-->
			<view v-if="current===4" @click="geturl(item.link,item.title)" class="item_list"
				v-for="(item,index) in bblili" :key="index">
				<view class="item_lf">
					{{item.title}}
				</view>
				<view class="item_rg">
					<Hotfire :item="2" :num="item.other"></Hotfire>
				</view>
			</view>
			<!-- item 知乎视频榜-->
			<view v-if="current===5" @click="geturl(item.link,item.title)" class="item_list"
				v-for="(item,index) in zhihu" :key="index">
				<view class="item_lf">
					{{item.title}}
				</view>
				<view class="item_rg">
					<Hotfire :item="2" :num="item.other"></Hotfire>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Hotfire from '../../component/hotfire.vue'
	export default {
		components: {
			Hotfire
		},
		data() {
			return {
				listdate: [],
				list: [{
					name: '微博热搜榜'
				}, {
					name: '微博话题榜'
				}, {
					name: '抖音热搜榜'
				}, {
					name: '抖音视频榜'
				}, {
					name: '哔哩哔哩日榜'
				}, {
					name: '知乎热榜'
				}],
				loadding: false,
				showdate: false,
				show: false,
				seartext: '',
				current: 0,
				copydata: [],
				activeindex: [0],
				weibolist: {},
				weibohuatilist: {},
				douyinship: {},
				douyinsou: {},
				bblili: [],
				blidate: '',
				zhihu: [],
				zhidate: '',
				content: '',
				src: '',
				huatutext: 'weibo'
			};
		},
		async onLoad() {
			// this.getbili()
			this.getweibo()
			let date = new Date();
			let month = date.getMonth() + 1;
			let strDate = date.getDate();
			this.seartext = `${month}--${strDate}`
			const db = uniCloud.database()
			let res = await db.collection('douyin').field('day').get()
			this.listdate = res.result.data
		},
		methods: {
			golinpage() {
				uni.setStorageSync('item', this.huatutext);
				uni.navigateTo({
					url: './rebtu'
				})
			},
			change(index) {
				if (index === 0) {
					this.huatutext = 'weibo'
					if (!this.weibolist) {
						this.getweibo()
					}
				} else if (index === 1) {
					this.huatutext = 'weibo'
					if (!this.weibohuatilist) {
						this.getweibo()
					}
				} else if (index === 2) {
					this.huatutext = 'douyin'
					if (!this.douyinsou.list) {
						this.getdouyin()
					}
				} else if (index === 3) {
					this.huatutext = 'douyin'
					if (!this.douyinship.list) {
						this.getdouyin()
					}
				} else if (index === 4) {
					this.huatutext = 'bilibili'
					if (!this.bblili[0]) {
						this.getbili()
					}
				} else if (index === 5) {
					this.huatutext = 'zhihu'
					if (!this.zhihu[0]) {
						this.getzhihu()
					}
				}
				this.current = index;
			},
			updabili() {
				uni.showLoading({
					title: '加载中'
				});
				uniCloud.callFunction({
					name: 'bilibili',
					success: res => {
						this.getbili()
						uni.hideLoading();
						uni.showToast({
							title: '刷新成功',
							duration: 1000,
							icon: 'success',
							mask: true
						});
					}
				})
			},
			updazhihu(){
				uni.showLoading({
					title: '加载中'
				});
				uniCloud.callFunction({
					name: 'zhihu',
					success: res => {
						this.getzhihu()
						uni.hideLoading();
						uni.showToast({
							title: '刷新成功',
							duration: 1000,
							icon: 'success',
							mask: true
						});
					}
				})
			},
			updatadouyin(){
				uni.showLoading({
					title: '加载中'
				});
				uniCloud.callFunction({
					name: 'douyin',
					success: res => {
						this.getdouyin()
						uni.hideLoading();
						uni.showToast({
							title: '刷新成功',
							duration: 1000,
							icon: 'success',
							mask: true
						});
					}
				})
			},
			updatalist() {
				uni.showLoading({
					title: '加载中'
				});
				uniCloud.callFunction({
					name: 'getweibo',
					success: res => {
						this.getweibo()
						uni.hideLoading();
						uni.showToast({
							title: '刷新成功',
							duration: 1000,
							icon: 'success',
							mask: true
						});
					}
				})

			},
			copycon(i) {
				if (i === 1) {
					uni.setClipboardData({
						data: this.copydata[1],
						success: function() {
							uni.showToast({
								title: '复制成功',
								duration: 1000,
								icon: 'success',
								mask: true
							});
						}
					});
				} else {
					uni.setClipboardData({
						data: this.copydata.join(' '),
						success: function() {
							uni.showToast({
								title: '复制成功',
								duration: 1000,
								icon: 'success',
								mask: true
							});
						}
					});
				}

			},
			// 微博热搜
			async getweibo() {
				this.loadding = false
				const db = uniCloud.database()
				let res = await db.collection('weibo').orderBy('date desc').get({
					getOne: true
				})
				if (res.result.code === 0) {
					console.log(res.result.data);
					this.loadding = true
					this.weibolist = res.result.data.wb_news
					this.weibohuatilist = res.result.data.wb_news_ht
				} else {

				}
			},
			// 抖音热搜
			async getdouyin() {
				this.loadding = false
				const db = uniCloud.database()
				let res = await db.collection('douyin').where('date desc').get({
					getOne: true
				})
				if (res.result.code === 0) {
					this.loadding = true
					console.log(res.result.data);
					this.douyinship = res.result.data.dy_shi
					this.douyinsou = res.result.data.dy_sou
				} else {

				}
			},
			async otherdate() {
				this.showdate = true
			},
			confirm(e) {
				this.seartext = e.label
				this.getdouyin()
			},
			// 知乎热榜
			async getzhihu() {
				const db = uniCloud.database()
				let res = await db.collection('zhihu').orderBy('date desc').get({
					getOne: true
				})
				this.zhihu = res.result.data.list
				this.zhidate = res.result.data.last_update
			},
			// 哔哩哔哩
			async getbili() {
				const db = uniCloud.database()
				let res = await db.collection('bilibili').orderBy('date desc').get({
					getOne: true
				})
				console.log(res.result);
				this.blidate = res.result.data.last_update
				let arr = res.result.data.list
				var compare = function(obj1, obj2) {
				 var val1 = obj1.other.replace('万', '');
				 var val2 = obj2.other.replace('万', '');
					val1 = parseInt(val1)
					val2 = parseInt(val2)
					if (val1 < val2) {
						return 1;
					} else if (val1 > val2) {
				 	return -1;
					} else {
				 	return 0;
					}
				}
				this.bblili = arr.sort(compare).slice(0, 10)
			},
			geturl(url, title) {
				console.log(url);
				//#ifdef APP-PLUS
				plus.runtime.openURL(url)
				//#endif
				//#ifdef H5
				window.location.href = url
				//#endif
				//#ifdef  MP-WEIXIN
				this.show = true
				this.copydata.push(title)
				this.copydata.push(url)
				//#endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zdstyle {
		font-size: 24rpx;
		background-color: #f56c6c;
		color: #fff;
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		text-align: center;
	}

	.item_list {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		width: 100%;
		height: 120rpx;
		border-bottom: 1px solid;
		justify-content: space-between;
	}

	.item_lf {
		padding-left: 12rpx;
		width: 70%;
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.item_rg {
		width: 25%;
	}

	.but {
		background-color: #ff9900;
		color: #fff;
		padding: 0;
		width: 180rpx;
		font-size: 28rpx;
	}
</style>
